<template>
    <view>
        <map style="width: 100%; height:400px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
        <view class="flex a-t j-t">
            <view class="f12 cf flex a-t j-t"
                  style="width: 50px;height: 50px;border-radius: 50%;border-radius: 50%;background: #fa3534;box-sizing: border-box;padding: 10px;text-align: center;">
                我的位置
            </view>
            <view @click="getKm" class="f14"
                  style="border-radius: 30px;border:#fa3534 solid 1px ;height: 30px;line-height: 30px;padding: 0 20px;margin: 0 30px;">
                {{KM?KM:'查看你和Ta的距离'}}
            </view>
            <view @click="getLocationInfo" class="f12 cf flex a-t j-t"
                  style="width: 50px;height: 50px;border-radius: 50%;border-radius: 50%;background: #ccc;box-sizing: border-box;padding: 10px;text-align: center;">
                {{istreu?'在线中':'刷新状态'}}
            </view>
        </view>
        <view class="f14 flex a-t j-t" style="margin-top: 30px;text-align: center;">
            显示运动轨迹
            <u-switch style="margin-left: 6px;" active-color="#fa3534" v-model="checked"></u-switch>
        </view>
        <view style="margin-top: 30px;">
            <u-button v-if="covers.length<2" open-type="share" style="width:300px;" type="error" shape="circle">
                邀请Ta共享实时位置
            </u-button>
        </view>
        <view class="c6 f12" style="text-align: center;margin-top: 20px;">
            页面关闭后，实时定位结束
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                checked: false,
                id: 0, // 使用 marker点击事件 需要填写id
                title: 'map',
                data: null,
                latitude: 39.909,
                longitude: 116.39742,
                tempCovers: [],
                covers: [],
                KM: '',
                istreu: false,
                arr: {},

                roomId: 0,
                roomInfo: null,
                timeInterval: null,
            }
        },
        onShareAppMessage(res) {
            if (res.from === 'button') {
                // 来自页面内分享按钮
                console.log(res.target);
            }
            return {
                title: '来和我一起分享位置',
                path: '/pages/weizhi/weizhi?roomId=' + this.roomId
            };
            // });
        },
        onLoad(e) {
            let self = this;
            uni.setNavigationBarColor({
                frontColor: '#000000',
                backgroundColor: '#ffffff',
            })
            if (e.roomId) {
                self.roomId = e.roomId;
            }else{
                self.$u.api.addLocationRoom({
                    'my_space_id': self.vuex_user_content.id
                }).then((data) => {
                    self.roomId = data.id;
                }).catch(function (res) {
                    uni.showToast({
                        icon: 'none',
                        title: res.msg,
                    })
                })
            }

            // #ifdef H5
            self.getjWeixinConfig();
            // #endif
        },
        onShow() {
            let self = this;

            self.timeInterval = setInterval(function () {
                if(self.roomId > 0){
                    self.getLocationInfo();
                }
            }, 8000)
        },
        onUnload(){
            clearInterval(self.timeInterval);
        },

        methods: {
            getjWeixinConfig(){
                let self = this;

                self.$u.api.wxConfig({
                    url: location.href.split('#')[0],
                    apis: ['getLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData'],
                }).then(function (res) {
                    self.jWeixin.config({ ...res });
                });
            },
            jWeixinShareConfig(){
                let self = this;
                self.jWeixin.ready(function(){
                    let link = location.href.split('#')[0];
                    link += link.indexOf("?") == -1 ? ("?data="+JSON.stringify(self.arr)) : ("&data="+JSON.stringify(self.arr));
                    let shareInfo = {
                        title: '来和我一起分享位置', // 分享标题
                        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
                    };

                    self.jWeixin.onMenuShareTimeline(shareInfo);
                    self.jWeixin.onMenuShareAppMessage(shareInfo);
                    self.jWeixin.updateAppMessageShareData(shareInfo);
                    self.jWeixin.updateTimelineShareData(shareInfo)
                })
            },

            async getKm() {
                let self = this;

                if (self.covers.length < 2) {
                    return uni.showToast({
                        title: '对方未在线,不可查看',
                        icon: "none"
                    })
                    return false;
                }
                let res = await this.$u.api.distance({
                    'room_id': self.roomId
                })
                this.KM = res;
            },

            getLocationInfo() {
                let self = this;
                // #ifdef H5
                self.jWeixin.ready(function(){
                    self.jWeixin.getLocation({
                        type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
                        success: function (res) {
                            self.latitude = res.latitude
                            self.longitude = res.longitude

                            self.$u.api.updateLocationRoom({
                                room_id: self.roomId,
                                latitude: res.latitude,
                                longitude: res.longitude
                            }).then((data) => {
                                self.roomInfo = data;
                                self.getLocationRoom();
                            }).catch(function (res) {
                                uni.showToast({
                                    icon: 'none',
                                    title: res.msg,
                                })
                            })

                            // #ifdef H5
                            self.jWeixinShareConfig();
                            // #endif
                        },
                        fail: (e) => {
                            console.log(e);
                        }
                    });
                });
                // #endif

                // #ifndef H5
                uni.getLocation({
                    type: 'wgs84',
                    geocode: true,//设置该参数为true可直接获取经纬度及城市信息
                    success: (res) => {
                        self.latitude = res.latitude
                        self.longitude = res.longitude

                        self.$u.api.updateLocationRoom({
                            room_id: self.roomId,
                            latitude: res.latitude,
                            longitude: res.longitude
                        }).then((data) => {
                            self.roomInfo = data;
                            self.getLocationRoom();
                        }).catch(function (res) {
                            uni.showToast({
                                icon: 'none',
                                title: res.msg,
                            })
                        })
                    },
                    fail: (e) => {
                        console.log(e);
                    }
                });
                // #endif

            },

            getLocationRoom(){
                let self = this;

                let locationInfo = self.roomInfo;

                let a_location_info = locationInfo.a_location_info;
                let b_location_info = locationInfo.b_location_info;

                if(a_location_info && b_location_info){
                    self.istreu = true
                    self.getKm();
                }else{
                    self.istreu = false
                };

                self.covers = [];
                if(a_location_info){
                    self.pushcover(a_location_info.latitude, a_location_info.longitude, a_location_info.avatar, a_location_info.nickname)
                }

                if(b_location_info){
                    self.pushcover(b_location_info.latitude, b_location_info.longitude, b_location_info.avatar, b_location_info.nickname)
                }
            },

            leaveLocationRoom(){
                let self = this;
                self.$u.api.leaveLocationRoom({
                    room_id: self.roomId,
                }).then((res) => {

                }).catch(function (res) {
                    uni.showToast({
                        icon: 'none',
                        title: res.msg,
                    })
                })
            },

            pushcover(latitude, longitude, avatar, nickname) {
                let arr = {
                    latitude: latitude,
                    longitude: longitude,
                    iconPath: avatar,
                    width: 20,
                    height: 20,
                    callout: {
                        "content": nickname,
                        "borderRadius": 5,
                        "display": "ALWAYS",
                        "padding": 7,
                        "bgColor": "#FFFFFF"
                    }
                }

                this.covers.push(arr)
            },

        }
    }
</script>

<style>
    page {
        background: #fff;
    }
</style>
